<%@ include file="/WEB-INF/views/common/header.jsp" %>

	<style type="text/css">
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain { width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
		
	</style>
	<link rel="stylesheet" href="<c:url value="/assets/css/lists.css" />" type="text/css" />
	<script type="text/javascript">
	
	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$("#dialog").dialog("destroy");

		var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
		
		$("#name").autocomplete({
			source: availableTags
		});
		
		var name = $("#name"),
			allFields = $([]).add(name),
			tips = $(".validateTips");
		
		function updateTips(t) {
			tips
				.text(t)
				.addClass('ui-state-highlight');
			setTimeout(function() {
				tips.removeClass('ui-state-highlight', 1500);
			}, 500);
		}

		function checkLength(o,n,min,max) {

			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( 'ui-state-error' );
				updateTips( '<fmt:message key="dokobu.ingredients.create.lenghterror">
								<fmt:param value="' + n + '" />
								<fmt:param value="' + min + '" />
								<fmt:param value="' + max + '" />
							</fmt:message>' );
				return false;
			} else {
				return true;
			}

		}

		function checkRegexp(o,regexp,n) {

			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass('ui-state-error');
				updateTips(n);
				return false;
			} else {
				return true;
			}

		}
		
		$("#new-ingredient-container").dialog({
			autoOpen: false,
			height: 200,
			width: 350,
			modal: true,
			buttons: {
				'<fmt:message key="dokobu.common.create" />': function() {
					var bValid = true;
					allFields.removeClass('ui-state-error');

					bValid = bValid && checkLength( name,'<fmt:message key="dokobu.common.name" />',3,50);

					bValid = bValid && checkRegexp( name,/^[a-z]([0-9a-z_ ])+$/i,'<fmt:message key="dokobu.ingredients.create.regexerror" />');
					
					if (bValid) {
						$.post( '/app/ingredients/add', $( '#new-ingredient-form' ).serialize(), function( data ) { 
								$( '#new-ingredient-container' ).dialog('close') 
							}, 'json' );
					}
				},
				'<fmt:message key="dokobu.common.cancel" />': function() {
					$(this).dialog('close');
				}
			},
			close: function() {
				allFields.val('').removeClass('ui-state-error');
			}
		});
		
		
		
		$('#create-user')
			.button()
			.click(function() {
				$('#new-ingredient-container').dialog('open');
			});

	});
	</script>


<div id="new-ingredient-container" title="<fmt:message key="dokobu.ingredients.create"/>">
	<p class="validateTips"><fmt:message key="dokobu.ingredients.create.hint"/></p>
	<form:form id="new-ingredient-form" modelAttribute="ingredient" action="addIngredient" method="post">
	<fieldset>
		<label for="name"><fmt:message key="dokobu.common.name"/></label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form:form>
</div>

<div id="data">
	<display:table name="${ingredients}">
  		<display:column property="name" title="Name" sortable="true"/>
	</display:table>
</div>

<button id="create-user"><fmt:message key="dokobu.ingredients.create"/></button>
<%@ include file="/WEB-INF/views/common/footer.jsp" %>